<template>
	<view class="container">
		<!-- 页面标题 -->
		<view class="page-title">医生列表</view>

		<!-- 医生列表 -->
		<view class="doctor-list">
			<!-- 当没有数据时显示 -->
			<view class="empty-state" v-if="doctorList.length === 0">
				<text>暂无医生信息</text>
			</view>

			<!-- 医生卡片 -->
			<view class="doctor-card" v-for="(doctor, index) in doctorList" :key="index">
				<!-- 医生头像 -->
				<view class="doctor-avatar">
					<image :src="doctor.avatar" mode="widthFix" :alt="doctor.doctorName + '的头像'"></image>
				</view>

				<!-- 医生信息 -->
				<view class="doctor-info">
					<view class="doctor-name-rating">
						<view>
							<text class="name">{{ doctor.doctorName }}</text>
							<text class="level">{{ getDoctorLevel(doctor.doctorLevelId) }}</text>
						</view>
						<view class="rating">
							<text class="star">★</text>
							<text class="score">{{ doctor.doctorRating }}</text>
						</view>
					</view>

					<text class="specialty">专长：{{ doctor.doctorSpecialty || '未填写' }}</text>
					<text class="description">{{ doctor.doctorDescription || '暂无介绍' }}</text>

					<!-- 预约按钮 - 传递医生ID -->
					<view class="contact-btn" @click="goToAppointmentList(doctor.doctorId)">
						<text>预约</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		queryDoctor
	} from '@/api/appointment.js';
	export default {
		data() {
			return {
				subItemId: null,
				doctorList: [],
				doctorLevels: ['主治医师', '副主任医师', '主任医师']
			};
		},
		onLoad(options) {
			this.subItemId = options.departmentId;
			console.log("接收到的部门id", this.subItemId);

			if (this.subItemId) {
				this.fetchDoctors(this.subItemId);
			} else {
				console.error("未获取到部门ID");
			}
		},
		methods: {
			fetchDoctors(subItemId) {
				queryDoctor({
						subItemId
					})
					.then(response => {
						console.log("医生列表：", response.data);
						if (response.code === 200 && response.data) {
							this.doctorList = response.data;
						} else {
							console.error("获取医生列表失败：", response.msg || "未知错误");
						}
					})
					.catch(error => {
						console.error("获取医生列表失败", error);
					});
			},

			getDoctorLevel(levelId) {
				if (levelId >= 0 && levelId < this.doctorLevels.length) {
					return this.doctorLevels[levelId];
				}
				return '未知职级';
			},

			// 跳转到预约页面并传递医生ID
			goToAppointmentList(doctorId) {
				console.log("要预约的医生ID：", doctorId);
				uni.navigateTo({
					url: `/pages/appointment/appointmentList?doctorId=${doctorId}`
				})
			}
		},
	};
</script>

<style scoped>
	/* 保持原有样式不变 */
	.container {
		padding: 16px;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.page-title {
		font-size: 20px;
		font-weight: bold;
		color: #333;
		margin-bottom: 20px;
		padding-bottom: 10px;
		border-bottom: 1px solid #eee;
	}

	.doctor-list {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.empty-state {
		text-align: center;
		padding: 40px 0;
		color: #999;
		background-color: #fff;
		border-radius: 8px;
	}

	.doctor-card {
		display: flex;
		gap: 16px;
		background-color: #fff;
		border-radius: 10px;
		padding: 16px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	}

	.doctor-avatar {
		width: 80px;
		height: 80px;
		flex-shrink: 0;
	}

	.doctor-avatar image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		object-fit: cover;
		border: 1px solid #eee;
	}

	.doctor-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.doctor-name-rating {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.name {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		margin-right: 8px;
	}

	.level {
		font-size: 14px;
		color: #666;
		background-color: #f0f7ff;
		padding: 2px 8px;
		border-radius: 12px;
	}

	.rating {
		display: flex;
		align-items: center;
		gap: 4px;
	}

	.star {
		color: #FFB800;
		font-size: 16px;
	}

	.score {
		color: #666;
		font-size: 14px;
	}

	.specialty {
		font-size: 14px;
		color: #666;
		margin: 8px 0;
		line-height: 1.5;
	}

	.description {
		font-size: 14px;
		color: #999;
		line-height: 1.5;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.contact-btn {
		margin-top: 12px;
		width: 120px;
		height: 36px;
		background-color: #007AFF;
		color: white;
		border-radius: 18px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
	}
</style>